<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        window.onload = function(){

        var ctx = document.getElementById('canvas').getContext('2d');
            ctx.fillStyle = 'yellow';

            function quanquan(){

                ctx.clearRect(0,0,800,1000);

                //大圆
                ctx.beginPath();
                ctx.arc(200,200,100,0,8);
                ctx.stroke();
                ctx.closePath();
                //保存状态   包含坐标原点位置(0,0)
                ctx.save();

                //变换坐标  大圆圆心(200 200)
                ctx.translate(200,200);


                ctx.rotate(i*Math.PI/360);
                //小圆
                ctx.beginPath();
                ctx.arc(100,0,10,0,8);
                ctx.fill();
                ctx.closePath();

                //回到坐标为(0,0)状态
                ctx.restore();
                i++;



            }
            var i = 1;
            setInterval(quanquan,10);

        }


    </script>

</head>
<body>
<canvas width="800" height="1000" id="canvas" style="background-color: antiquewhite">
    浏览器不支持canvas
</canvas>

</body>
</html>